<template>
  <s-layout>
    <view class="container">
      <!-- 封面图 -->
      <view class="cover-container">
        <view class="cover-overlay"></view>
        <view
          class="cover-background"
          :style="{ backgroundImage: `url(${detailData.coverImage})` }"
        ></view>
        <image
          class="cover-image"
          :src="detailData.coverImage"
          mode="aspectFill"
        ></image>

        <!-- 浮动信息卡片 -->
        <view class="info-card">
          <view class="info-card-content">
            <view class="info-header">
              <view class="info-tags">
                <text class="tag primary">{{ detailData.bookType }}</text>
                <text class="tag outline">{{ detailData.mode }}</text>
              </view>
              <view class="countdown">
                <text class="countdown-label">距离开始</text>
                <text class="countdown-value">{{ detailData.daysLeft }}天</text>
              </view>
            </view>
            <text class="info-title">{{ detailData.activityTitle }}</text>
            <view class="participants-preview">
              <view class="avatar-group">
                <image
                  v-for="(avatar, index) in detailData.avatars.slice(0, 4)"
                  :key="index"
                  :src="avatar"
                  class="avatar"
                  mode="aspectFill"
                ></image>
              </view>
              <text class="participants-count">
                <text class="highlight">{{ detailData.participants }}</text>
                人已报名 / 限额
                <text class="highlight">{{ detailData.peopleNum }}</text> 人
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 活动基本信息 -->
      <view class="section basic-info">
        <view class="info-item">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="info-icon"
          >
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" y1="2" x2="16" y2="6"></line>
            <line x1="8" y1="2" x2="8" y2="6"></line>
            <line x1="3" y1="10" x2="21" y2="10"></line>
          </svg>
          <view class="info-content">
            <view class="info-label">活动时间</view>
            <text class="info-value">{{ detailData.activityTime }}</text>
          </view>
        </view>

        <view class="info-item">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="info-icon"
          >
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
            <circle cx="12" cy="10" r="3"></circle>
          </svg>
          <view class="info-content">
            <view class="info-label">活动地点</view>
            <text class="info-value">{{ detailData.displayAddress }}</text>
            <view class="view-map" @tap="viewMap">
              <text>查看地图</text>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="chevron-icon"
              >
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </view>
          </view>
        </view>

        <view class="info-item">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="info-icon"
          >
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          <view class="info-content">
            <view class="info-label">报名截止</view>
            <view class="info-value">{{ detailData.deadline }}</view>
            <text class="deadline-countdown"
              >距离报名截止还有 {{ detailData.deadlineCountdown }}</text
            >
          </view>
        </view>
      </view>

      <!-- 活动介绍 -->
      <view class="section description">
        <view class="section-title">活动简介</view>
        <view class="description-text">{{ detailData.activityDescription }}</view>

        <!-- <view class="description-image-container">
				<image class="description-image" :src="activity.descriptionImage" mode="widthFix"></image>
			</view> -->
      </view>

      <!-- 标签页 -->
      <view class="section tabs-section">
        <view class="tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab"
            :class="{ active: currentTab === tab.value }"
            @tap="changeTab(tab.value)"
          >
            {{ tab.label }}
          </view>
        </view>

        <view class="tab-content">
          <!-- 成员列表 -->
          <view v-if="currentTab === 'members'" class="members-content">
            <view class="members-header">
              <text class="members-title"
                >已报名成员 ({{ detailData.participants }})</text
              >
              <text class="view-all" @tap="viewAllMembers">查看全部</text>
            </view>

            <view class="members-grid">
              <view
                v-for="(member, index) in detailData.members"
                :key="index"
                class="member-item"
              >
                <image
                  class="member-avatar"
                  :src="member.avatar"
                  mode="aspectFill"
                ></image>
                <text class="member-name">{{ member.name }}</text>
              </view>
            </view>

          </view>

          <!-- 活动流程 -->
          <view v-if="currentTab === 'schedule'" class="schedule-content">
            <view class="timeline">
              <view
                v-for="(item, index) in detailData.schedule"
                :key="index"
                class="timeline-item"
              >
                <view class="timeline-point"></view>
                <view class="timeline-content">
                  <text class="timeline-title">{{ item.title }}</text>
                  <text class="timeline-time">{{ item.time }}</text>
                  <text class="timeline-description">{{
                    item.description
                  }}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 群二维码 -->
          <view v-if="currentTab === 'qrcode'" class="qrcode-content">
            <view class="qrcode-container">
              <view class="qrcode-inner">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="240"
                  height="240"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="qrcode-icon"
                >
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                  <rect x="7" y="7" width="3" height="3"></rect>
                  <rect x="14" y="7" width="3" height="3"></rect>
                  <rect x="7" y="14" width="3" height="3"></rect>
                  <rect x="14" y="14" width="3" height="3"></rect>
                </svg>
                <view class="qrcode-logo">
                  <image
                    class="logo"
                    src="/static/images/logo.png"
                    mode="aspectFill"
                  ></image>
                </view>
              </view>
            </view>
            <text class="qrcode-description"
              >扫描上方二维码加入活动微信群，获取最新活动信息和与其他成员交流</text
            >
            <button class="primary-button" @tap="saveQrcode">保存二维码</button>
          </view>
        </view>
      </view>

      <!-- 底部操作栏 -->
      <view class="bottom-action-bar">
        <view class="action-group">
          <view class="collection-btn" @tap="toggleCollection">
            <image 
              class="collection-icon" 
              :src="isCollected ? 'https://sail-imgs.oss-cn-beijing.aliyuncs.com/book-uni/collection-active.png' : 'https://sail-imgs.oss-cn-beijing.aliyuncs.com/book-uni/collection.png'" 
              mode="aspectFit"
            ></image>
            <text class="collection-text">{{isCollected ? '已收藏' : '收藏'}}</text>
          </view>
          <button class="signup-button" @tap="signupActivity">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="signup-icon"
            >
              <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="8.5" cy="7" r="4"></circle>
              <line x1="20" y1="8" x2="20" y2="14"></line>
              <line x1="23" y1="11" x2="17" y2="11"></line>
            </svg>
            立即报名
          </button>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import sheep from "@/sheep";
sheep.$store("user").isLogin = true;
sheep.$store("user").userInfo = {
  id: "1"
}
// 响应式状态
const currentTab = ref("members");
const isCollected = ref(false);
const detailData = ref({
  id: 1,
  activityTitle: "《百年孤独》读书分享会",
  bookType: "文学",
  mode: "线下活动",
  activityTime: "2025年4月15日 14:00-16:00",
  displayAddress: "北京市朝阳区国贸中心三层咖啡厅",
  deadline: "2025年4月14日 23:59",
  deadlineCountdown: "15 天 8 小时",
  participants: 18,
  peopleNum: 30,
  daysLeft: 15,
  coverImage: "https://imagecgr.oss-cn-beijing.aliyuncs.com/hunaderyearsjpg.jpg",
  activityDescription:
    "一起探讨马尔克斯的魔幻现实主义经典，分享阅读体验与感悟，解读小说中的隐喻与象征。适合所有热爱文学的读者参与。",
  descriptionImage: "/static/images/activity-detail.jpg",
  avatars: [
    "https://img1.baidu.com/it/u=3217838212,795208401&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500",
    "https://img1.baidu.com/it/u=3077505673,1606523036&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "https://img0.baidu.com/it/u=1648388656,1363766309&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  ],
  // 成员数据
  members: [
    {
      name: "用户1",
      avatar: "https://img1.baidu.com/it/u=3217838212,795208401&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500",
    },
    {
      name: "用户2",
      avatar: "https://img1.baidu.com/it/u=3985150573,583103601&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
    },
    {
      name: "用户3",
      avatar: "https://img0.baidu.com/it/u=1648388656,1363766309&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      name: "用户4",
      avatar: "https://img0.baidu.com/it/u=212230986,3555547834&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    },
    {
      name: "用户5",
      avatar: "https://img1.baidu.com/it/u=3077505673,1606523036&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    }
  ],
  // 活动流程数据
  schedule: [
    {
      title: "签到入场",
      time: "14:00-14:15",
      description: "请提前到达活动地点完成签到",
    },
    {
      title: "活动介绍",
      time: "14:15-14:30",
      description: "主持人介绍活动流程和参与规则",
    },
    {
      title: "主题分享",
      time: "14:30-15:30",
      description: "嘉宾分享《百年孤独》的阅读心得与解读",
    },
    {
      title: "互动讨论",
      time: "15:30-16:00",
      description: "参与者自由发言，交流读书感受",
    },
  ],
});

// 标签页数据
const tabs = ref([
  {
    label: "成员列表",
    value: "members",
  },
  {
    label: "活动流程",
    value: "schedule",
  },
  {
    label: "群二维码",
    value: "qrcode",
  },
]);

// 方法
const changeTab = (tab) => {
  currentTab.value = tab;
};

const toggleCollection = () => {
  isCollected.value = !isCollected.value;
  uni.showToast({
    title: isCollected.value ? "已收藏" : "已取消收藏",
    icon: "success",
  });
};

const viewMap = () => {
  uni.showToast({
    title: "查看地图功能开发中",
    icon: "none",
  });
};

const viewAllMembers = () => {
  uni.navigateTo({
    url: `/pages/book/activity/people/list?id=${detailData.value.id}`,
  });
};

const saveQrcode = () => {
  uni.showToast({
    title: "二维码保存功能开发中",
    icon: "none",
  });
};

const signupActivity = () => {
  uni.showModal({
    title: "确认报名",
    content: `您确定要报名参加"${detailData.value.activityTitle}"吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: "报名成功",
          icon: "success",
        });
      }
    },
  });
};

// 生命周期钩子
onMounted(() => {
  // 这里可以根据路由参数获取活动ID并加载数据
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const id = currentPage.options?.id || 1;
  console.log("加载活动ID:", id);

  // 实际应用中这里会发起请求获取活动详情
  loadActivityDetail(id);
});

// 加载活动详情数据
const loadActivityDetail = (id) => {
  // 模拟API请求
  // sheep.$api.book.activity.detail({ id }).then(res => {
  //   if (res.code === 0) {
  //     detailData.value = res.data;
  //   } else {
  //     uni.showToast({
  //       title: res.msg || '加载失败',
  //       icon: 'none'
  //     });
  //   }
  // }).catch(err => {
  //   console.error('加载活动详情失败', err);
  //   uni.showToast({
  //     title: '网络异常，请稍后再试',
  //     icon: 'none'
  //   });
  // });
};
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  background-color: #f9fafb;
  padding-bottom: 120rpx;
}

/* 头部样式 */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  &-content {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
  }

  .back-button {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-title {
    flex: 1;
    font-size: 36rpx;
    font-weight: 600;
    text-align: center;
  }

  &-actions {
    display: flex;
    gap: 24rpx;
  }

  .action-button {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-icon {
    color: #6b7280;
  }
}

/* 封面区域 */
.cover-container {
  position: relative;
  width: 100%;
  height: 480rpx;
  background-color: #e0f2fe;

  .cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 0;
  }

  .cover-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20rpx);
    opacity: 0.6;
    z-index: 0;
  }

  .cover-image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
  }
}

/* 浮动信息卡片 */
.info-card {
  position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: -120rpx;
  background-color: white;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 20;

  &-content {
    padding: 32rpx;
  }

  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16rpx;
  }

  .info-tags {
    display: flex;
    gap: 8rpx;
  }

  .tag {
    font-size: 24rpx;
    padding: 4rpx 16rpx;
    border-radius: 8rpx;

    &.primary {
      background-color: #FF2442;
      color: white;
    }

    &.outline {
      background-color: #FFF0F0;
      color: #FF2442;
      border: 2rpx solid #FFCDD2;
    }
  }

  .countdown {
    background-color: #FFF0F0;
    border-radius: 12rpx;
    padding: 8rpx 16rpx;
    text-align: center;

    &-label {
      font-size: 24rpx;
      color: #FF2442;
      font-weight: 500;
    }

    &-value {
      font-size: 28rpx;
      font-weight: bold;
      color: #E91E63;
    }
  }

  .info-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 16rpx;
  }

  .participants-preview {
    display: flex;
    align-items: center;
    margin-top: 16rpx;
  }

  .avatar-group {
    display: flex;
    margin-right: 16rpx;
  }

  .avatar {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    border: 4rpx solid white;
    margin-left: -16rpx;

    &:first-child {
      margin-left: 0;
    }
  }

  .participants-count {
    font-size: 28rpx;
    color: #6b7280;

    .highlight {
      color: #FF2442;
      font-weight: 600;
    }
  }
}

/* 基本信息区域 */
.section {
  margin-top: 24rpx;
  padding: 32rpx;
  background-color: white;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-left: 30rpx;
  margin-right: 30rpx;

  &.basic-info {
    margin-top: 150rpx;
  }
}

.info-item {
  display: flex;
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .info-icon {
    color: #FF2442;
    margin-right: 24rpx;
    margin-top: 4rpx;
  }

  .info-content {
    flex: 1;
  }

  .info-label {
    font-size: 32rpx;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8rpx;
  }

  .info-value {
    font-size: 28rpx;
    color: #6b7280;
  }

  .view-map {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #FF2442;
    margin-top: 8rpx;
  }

  .chevron-icon {
    color: #FF2442;
    margin-left: 4rpx;
  }

  .deadline-countdown {
    font-size: 24rpx;
    color: #ef4444;
    margin-top: 8rpx;
  }
}

/* 活动介绍 */
.description {
  .section-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 16rpx;
  }

  .description-text {
    font-size: 28rpx;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 16rpx;
  }

  .description-image-container {
    margin-top: 24rpx;
    display: flex;
    justify-content: center;
  }

  .description-image {
    width: 100%;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }
}

/* 标签页 */
.tabs-section {
  .tabs {
    display: flex;
    background-color: #FFF0F0;
    border-radius: 16rpx;
    padding: 8rpx;
    margin-bottom: 24rpx;
  }

  .tab {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    font-size: 28rpx;
    color: #4b5563;
    border-radius: 12rpx;

    &.active {
      background-color: white;
      color: #FF2442;
      font-weight: 500;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
  }
}

/* 成员列表 */
.members-content {
  .members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .members-title {
    font-size: 32rpx;
    font-weight: 500;
  }

  .view-all {
    font-size: 28rpx;
    color: #FF2442;
  }

  .members-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24rpx;
  }

  .member-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .member-avatar {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    border: 4rpx solid #FFCDD2;
    margin-bottom: 8rpx;
  }

  .member-name {
    font-size: 24rpx;
    color: #4b5563;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .view-more {
    text-align: center;
    font-size: 28rpx;
    color: #6b7280;
    margin-top: 32rpx;
  }
}

/* 活动流程 */
.schedule-content {
  .timeline {
    position: relative;
    padding-left: 32rpx;
    margin-left: 16rpx;
    border-left: 4rpx solid #FFCDD2;
  }

  .timeline-item {
    position: relative;
    margin-bottom: 48rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .timeline-point {
    position: absolute;
    left: -48rpx;
    top: 8rpx;
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    background-color: #FF2442;
    border: 4rpx solid white;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }

  .timeline-content {
    padding-bottom: 16rpx;
  }

  .timeline-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8rpx;
  }

  .timeline-time {
    font-size: 28rpx;
    font-weight: 500;
    color: #FF2442;
    margin-bottom: 8rpx;
  }

  .timeline-description {
    font-size: 28rpx;
    color: #6b7280;
  }
}

/* 群二维码 */
.qrcode-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 0;

  .qrcode-container {
    background-color: white;
    padding: 32rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    border: 2rpx solid #e5e7eb;
    margin-bottom: 32rpx;
    position: relative;
  }

  .qrcode-inner {
    position: relative;
    width: 384rpx;
    height: 384rpx;
    background: linear-gradient(to bottom right, #FFF0F0, #FFCDD2);
    border-radius: 12rpx;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .qrcode-icon {
    color: #E91E63;
  }

  .qrcode-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96rpx;
    height: 96rpx;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
  }

  .qrcode-description {
    font-size: 28rpx;
    color: #6b7280;
    text-align: center;
    max-width: 600rpx;
    margin-bottom: 32rpx;
  }

  .primary-button {
    background-color: #FF2442;
    color: white;
    font-size: 32rpx;
    padding: 20rpx 64rpx;
    border-radius: 40rpx;
    border: none;
  }
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 2rpx solid #f3f4f6;
  padding: 24rpx 32rpx;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
  z-index: 40;

  .action-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .collection-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160rpx;
  }

  .collection-icon {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 4rpx;
  }

  .collection-text {
    font-size: 24rpx;
    color: #6b7280;
  }

  .signup-button {
    width: 520rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background: linear-gradient(to right, #FF2442, #FF6E6E);
    color: white;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    border: none;

    &:active {
      background: linear-gradient(to right, #E91E63, #FF2442);
    }

    .signup-icon {
      color: white;
    }
  }
}
</style>
